{{ block title }}
    You have now completed the simulation.
{{ endblock }}

{{ block content }}

<style>
    .mgslider-wrapper {
        border-spacing: 10px;
    }
    .mgslider-limit {
        width: 10%;
        min-width: 75px;
        height: 40px;
        margin: 100px;
        text-align: center;
        background: #eee;
        border: 1px solid #888;
    }
    .mgslider-limit, .mgslider-value {
        font-variant-numeric: tabular-nums;
    }
    .mgslider-before {
        height: 16px;
        width: 100%;
        background: #1e5bff;
    }
</style>

<h6><i>Please answer the following question.</i></h6>


<p>Over the course of the {{ player.participant.periods_survived }} periods, by what percentage (%) would you estimate the price of the Basket of Goods changed? (In other words, what do you estimate was the overall inflation rate?)</p>
<!-- <p>
    <input name="inflationEstimation" type="percent"> <b>%</b>
</p>

<p>Choose the point on the scale that represents how much you like pizza:</p>
<p>
    Least &nbsp;
    {{ for choice in form.inflationEstimation }}
        {{ choice }}
    {{ endfor }}
    &nbsp; Most
</p> -->

<p>Click the blue bar to reveal the slider. Drag it along the bar to select your estimate.</p>

    <div id="sliders_here"></div>

    <script src="{{ static 'mgslider.js' }}"></script>

    <script>
        $(document).ready(function (event) {
            slider1 = new mgslider("inflationEstimation", -200, 200, 1);
            slider1.print(document.getElementById("sliders_here"));
            slider1.yourvalue = "Your estimate";
            slider1.f2s = function (val) {
                return val + ' %';
            }
        });
    </script>

{{ formfield_errors 'inflationEstimation' }}

{{ next_button }}

{{ endblock }}